document.addEventListener('DOMContentLoaded', function() {

    var previewimg = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var bigImg = big.querySelector('img');

    previewimg.addEventListener('mouseenter', function(e) {
        // console.log(e);
        mask.style.display = 'block';
        big.style.display = 'block';

    })
    previewimg.addEventListener('mouseleave', function(e) {
        mask.style.display = 'none';
        big.style.display = 'none';
    })

    previewimg.addEventListener('mousemove', function(e) {
        // console.log(e);
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x + ' ==' + y);

        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;

        var maskMaX = previewimg.offsetWidth - mask.offsetWidth;

        // console.log(maskMaX);
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMaX) {
            maskX = maskMaX;
        }

        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMaX) {
            maskY = maskMaX;
        }

        mask.style.top = maskY + 'px';
        mask.style.left = maskX + 'px';

        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离

        // 大图片最大移动距离
        var bigMax = big.offsetWidth - bigImg.offsetWidth;

        bigImgX = maskX * bigMax / maskMaX;
        bigImgY = maskY * bigMax / maskMaX;
        bigImg.style.left = bigImgX + 'px';
        bigImg.style.top = bigImgY + 'px';
    })


})